{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% extends 'base-protocol-mozilla.html' %}

{% block page_title %}{{ ftl('opt-out-confirmation-cool-we-hear') }}{% endblock page_title %}
{% block page_desc %}{{ ftl('opt-out-confirmation-youre-now-opted') }}{% endblock %}

{% block canonical_urls %}<meta name="robots" content="noindex">{% endblock %}

{% block page_css %}
  {{ css_bundle('newsletter-opt-out-confirmation') }}
{% endblock %}

{% block content %}
<main>
  <div class="mzp-l-content mzp-t-content-md">
    <header>
      <h1>{{ self.page_title() }}</h1>
      <p class="tagline mzp-u-title-sm">{{ self.page_desc() }}</p>
    </header>

    <form method="post" action="{{ recovery_url }}" id="newsletter-recovery-form" class="newsletter-recovery-form mzp-c-form" data-testid="newsletter-recovery-form">
      <header class="mzp-c-form-header">
        <p>
          {{ ftl('opt-out-confirmation-youll-continue') }}
        </p>
      </header>

      <div class="mzp-c-form-errors hidden" id="newsletter-errors" data-testid="newsletter-recovery-error-message">
        <ul class="mzp-u-list-styled">
          <li class="error-email-invalid hidden">{{ ftl('newsletters-this-is-not-a-valid-email') }}</li>
          <li class="error-email-not-found hidden">{{ ftl('newsletters-this-email-address-is-not', url=url('newsletter.subscribe')) }}</li>
          <li class="error-try-again-later hidden">{{ ftl('newsletters-we-are-sorry-but-there') }}</li>
        </ul>
      </div>

      <div class="newsletter-recovery-form-success-msg hidden" data-testid="newsletter-recovery-thanks">
        <p>{{ ftl('newsletters-success-an-email-has-been-sent') }}</p>
      </div>

      <div class="newsletter-recovery-form-fields">
        <div class="mzp-c-field mzp-l-stretch">
          {{ form.email.errors }}
          <label for="id_email" class="mzp-c-field-label">{{ ftl('opt-out-confirmation-your-email') }}</label>
          {{ field_with_attrs(form.email, placeholder=ftl('opt-out-confirmation-yournameexamplecom')|safe, class='mzp-c-field-control'|safe) }}
        </div>
        <div class="mzp-c-button-container mzp-l-stretch">
          <button id="newsletter-submit" class="mzp-c-button" type="submit" data-testid="newsletter-recovery-submit">{{ ftl('opt-out-confirmation-manage-preferences') }}</button>
        </div>
      </div>
    </form>

    <aside>
      <h2>{{ ftl('opt-out-confirmation-prefer-to-get') }}</h2>
      <ul class="mzp-u-list-styled">
        <li><a href="https://blog.mozilla.org/">{{ ftl('opt-out-confirmation-check-out-our') }}</a></li>
        <li><a href="https://support.mozilla.org/">{{ ftl('opt-out-confirmation-get-help') }}</a></li>
        <li><a href="{{ url('newsletter.firefox') }}">{{ ftl('opt-out-confirmation-subscribe-to') }}</a></li>
      </ul>

      <ul class="social-links">
        <li><a class="instagram" href="{{ mozilla_instagram_url() }}" data-link-position="footer" data-link-text="Instagram (@mozilla)">{{ ftl('opt-out-confirmation-instagram') }}<span> (@mozilla)</span></a></li>
        <li><a class="youtube" href="https://www.youtube.com/firefoxchannel" data-link-position="footer" data-link-text="YouTube (firefoxchannel)">{{ ftl('opt-out-confirmation-youtube') }}<span> (firefoxchannel)</span></a></li>
        <li><a class="facebook" href="https://www.facebook.com/Firefox" data-link-position="footer" data-link-text="Facebook (Firefox)">{{ ftl('opt-out-confirmation-facebook') }}<span> (Firefox)</span></a></li>
        <li><a class="bluesky" href="https://bsky.app/profile/firefox.com" data-link-position="footer" data-link-text="Bluesky (@firefox.com)" translate="no">Bluesky<span> (@firefox.com)</span></a></li>
      </ul>
    </aside>
  </div>{#-- /.content --#}
</main>
{% endblock %}

{% block js %}
  {{ js_bundle('newsletter-recovery') }}
{% endblock %}
